<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title>Dojo Dragdrop Handle Test</title>

<script type="text/javascript">
	var djConfig = { isDebug: true };
</script>

<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.html.selection");
	dojo.require("dojo.dnd.*");
	dojo.require("dojo.event.*");

	function init(){
		dojo.html.disableSelection(dojo.byId('inner1'));

		var drag = new dojo.dnd.HtmlDragSource(dojo.byId('outer1'));
		drag.setDragHandle(dojo.byId('inner1'));

		var drag = new dojo.dnd.HtmlDragSource(dojo.byId('inner2'));
		drag.setDragTarget(dojo.byId('outer2'));
	}

	dojo.addOnLoad(init);
</script>
<style>
.outer {
	position: absolute;
	top: 25px;
	left: 25;
	width: 300px;
	height: 300px;
	background-color: lightblue;
}

.inner {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 100px;
	height: 30px;
	background-color: pink;
}

#outer2 {
	left: 375px;
}

</style>
</head>
<body>

<div class="outer" id="outer1">
	<div class="inner" id="inner1">
		drag me!
	</div>
	i am dragged only by my inner handle<br />
	we first register the outer box as a drag source, then change it's handle to the inner box
</div>

<div class="outer" id="outer2">
	<div class="inner" id="inner2">
		drag me!
	</div>
	i am dragged only by my inner handle<br />
	we first register the inner box as a drag source, then change it's target to the outer box
</div>

</body>
</html>
